<template>
  <mu-paper class="i-card-paper">
    <mu-card class="i-card" @click="toThemes(item.id, item.type, $event)">
      <mu-card-media class="imgbox" :id="item.id">
        <img :src="[baseImgUrl + item.cover]" alt="" />
        <mu-fade-transition>
          <a-upload
            class="ic_controller"
            name="file"
            action="https://up.qbox.me"
            accept="image/png, image/jpeg, image/jpg"
            :multiple="false"
            :data="tokens"
            :beforeUpload="beforeUpload"
            @change="uploadCover"
            :showUploadList="false"
          >
            <a class="ic_changeimg">
              <a-icon type="picture" />
            </a>
          </a-upload>
        </mu-fade-transition>
      </mu-card-media>
      <div class="text_controller">
        <div class="text_title">
          {{ item.title }}
        </div>
        <a
          class="text_btn"
          style="position:absolute;right:19px;top:0;"
          @click.stop="menuShowControl(item.id)"
        >
          <a-icon type="setting" />
        </a>
        <mu-menu
          style="position:absolute;right:19px;top:0;"
          @open="menuOpenOperate($event)"
          :open.sync="menuShow[item.id]"
          placement="right-start"
          :id="['set_' + item.id]"
        >
          <!-- <a class="text_btn">
            <a-icon type="setting" />
          </a> -->
          <mu-list
            class="setting-menu-list "
            slot="content"
            @click.stop
            :id="['set_' + item.id]"
          >
            <mu-list-item button key="1" @click="renameProjectShow(item)">
              <img
                src="https://image.xuexiwangzhe.com/FkkFagkPa-y8lMKmEckDd4boIppH"
                class="item-img"
              />
              <span class="item-text">重命名</span>
            </mu-list-item>
            <mu-list-item button key="2" @click="copyProject">
              <img
                src="https://image.xuexiwangzhe.com/Fs3AudynQJjs9X3rVch9qQMo2p7-"
                class="item-img"
              />
              <span class="item-text">复制</span>
            </mu-list-item>
            <!-- <mu-list-item button key="3" @click="showModal">
              <img
                src="https://image.xuexiwangzhe.com/FrFBysj1E_3ZxWcTzckpZ0qNqjKm"
                class="item-img"
              />
              <span class="item-text">移动至分组</span>
              <a-icon type="right" />
            </mu-list-item> -->
            <mu-list-item button key="4" @click="deleteProjectShow">
              <img
                src="https://image.xuexiwangzhe.com/FnEdToWohEsKYzHmqtXu3lpSyag2"
                class="item-img"
              />
              <span class="item-text">删除</span>
            </mu-list-item>
          </mu-list>
        </mu-menu>
      </div>
      <div
        class="event_mask"
        v-show="isSetingCard"
        @click="hideSetting($event)"
      ></div>
      <a-modal
        title="移动至分组"
        v-model="visible"
        centered
        @ok="handleOk"
        cancelText="取消"
        okText="确认"
      >
        <a-table
          :columns="columns"
          :dataSource="table_data"
          :rowSelection="rowSelection"
          :pagination="false"
          :rowKey="'id'"
        />
      </a-modal>
      <a-modal
        v-model="cardDelete.isShow"
        width="540px"
        centered
        :closable="false"
        :footer="null"
        :title="null"
      >
        <div class="card_name_header">
          删除项目
        </div>
        <div class="inputBox">
          <input
            type="text"
            class="input"
            placeholder="请输入项目名称，防止误操作"
            v-model="confirmTitle"
          />
          <div class="carTips">
            所有内容将无法找回，请谨慎操作。
          </div>
        </div>
        <div class="car_name_footer">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="danger" @click="deleteProject(item.id)">
            确认
          </a-button>
        </div>
      </a-modal>
      <!--重命名 start-->
      <a-modal
        v-model="projectRename.isShow"
        width="540px"
        :closable="false"
        :footer="null"
        centered
        :title="null"
      >
        <div class="card_name_header">
          重命名项目
        </div>
        <div class="inputBox">
          <input type="text" class="input" v-model="confirmTitle" />
        </div>
        <div class="car_name_footer">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="renameProject">
            确认
          </a-button>
        </div>
      </a-modal>
      <!--重命名 end-->
    </mu-card>
  </mu-paper>
</template>

<script>
import { getQiniuTokens } from "../../../../util/auth.js";
import { resolve } from "url";
import { reject } from "q";
import { setTimeout } from "timers";
import { forestgreen } from "color-name";
export default {
  name: "i-card",
  props: ["item", "groupTree"],
  data() {
    return {
      isSetingCard: false,
      idCover: "",
      headers: {
        "Content-Type": "multipart/form-data;boundary ",
      },
      baseImgUrl: "https://image.xuexiwangzhe.com/",
      visible: false,
      table_data: this.groupTree,
      rowSelection: {
        type: "radio",
        //选中分组
        onChange: (selectedRowKeys, selectedRows) => {
          const _this = this;
          this.moveGroup = {
            projectCategoryId: selectedRowKeys[0],
            id: _this.item.id,
          };
        },
      },
      moveGroup: null,
      columns: [
        {
          title: "项目分组",
          dataIndex: "name",
          key: "name",
        },
      ],
      tokens: { token: "" },
      file: null,
      confirmTitle: "",
      cardDelete: {
        isShow: false,
      },
      projectRename: {
        isShow: false,
      },
      menuShow: {},
    };
  },
  mounted() {
    const resultList = document.getElementsByClassName("ant-upload-select");
    if (resultList) {
      const newResultList = [...resultList];
      newResultList.forEach((element) => {
        element.onclick = function(event) {
          event.stopPropagation();
        };
      });
    }

    const setResultList = document.getElementsByClassName("text_btn");
    if (setResultList) {
      const newSetResultList = [...setResultList];
      newSetResultList.forEach((element) => {
        element.onclick = function(event) {
          // event.stopPropagation();
        };
      });
    }
  },
  methods: {
    toThemes(id, mode) {
      location.assign(
        "themes.html#/?" +
          location.search +
          "&projectId=" +
          id +
          "&mode=" +
          mode
      );
    },
    //跳转至设置
    toSetting(id, mode) {
      location.assign(
        "settings.html#/?" +
          location.search +
          "&projectId=" +
          id +
          "&mode=" +
          mode
      );
    },
    menuShowControl(id) {
      if (!this.menuShow[id]) {
        this.$set(this.menuShow, id, true);
      } else {
        this.$set(this.menuShow, id, false);
      }
    },
    menuOpenOperate(e) {
      // this.hideSetting()
    },
    handleCancel(e) {
      // console.log(e);
      this.cardDelete.isShow = false;
      this.projectRename.isShow = false;
      this.confirmTitle = "";
      // this.newPro.type="0";
    },
    handleClick(e) {
      console.log("click ", e);
    },
    showModal() {
      this.hideSetting();
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      //移动分组
      console.log(this.moveGroup);
      const parms = this.moveGroup;
      const _this = this;
      this.$axios.post("/project/move", parms).then((res) => {
        console.log(res.success);
        if (res.success) {
          _this.$message.success("移动分组成功");
          _this.$emit("refresh");
          this.hideSetting();
        } else {
          _this.$message.error(res.msg);
        }
      });
      this.visible = false;
    },
    //显示card对应的设置
    showSetMenu(id) {
      //显示弹窗
      // document.getElementById("set_" + id).style.display = "block";
      document.getElementById("set_" + id).setAttribute("open", true);
      //注册屏幕监听事件：除了set区域点击其他区域都隐藏
      this.isSetingCard = true;
    },
    hideSetting(e = "") {
      if (e) {
        e.stopPropagation();
      }
      const doms = document.getElementsByClassName("mu-popover");
      for (var i = 0; i < doms.length; i++) {
        doms[i].style.display = "none";
      }
      this.isSetingCard = false;
    },
    //删除项目：project/delete
    deleteProjectShow(id, title) {
      //弹窗
      this.hideSetting();
      this.cardDelete.isShow = true;
    },
    deleteProject(id) {
      //弹窗
      const url = "/project/delete";
      const params = { id: id, title: this.confirmTitle };
      var _this = this;
      _this.$axios.post(url, params).then((res) => {
        console.log(res.success);
        if (res.success) {
          _this.$message.success("删除成功");
          _this.$emit("refresh");
          this.cardDelete.isShow = false;
          this.confirmTitle = "";
          this.hideSetting();
        } else {
          _this.$message.error(res.msg);
        }
      });
    },
    //项目重命名：project/delete
    renameProjectShow() {
      this.hideSetting();
      //弹窗
      this.projectRename.isShow = true;
      this.confirmTitle = this.item.title;
    },
    renameProject() {
      var _this = this;

      const parms = {
        id: _this.item.id,
        title: _this.confirmTitle,
        cover: this.item.cover,
      };
      if (_this.confirmTitle == "" || _this.confirmTitle == null) {
        _this.$message.error("请输入新的项目名称");
      } else {
        this.$axios.post("/project/update", parms).then((res) => {
          console.log(res.success);
          if (res.success) {
            _this.$message.success("重命名成功");
            _this.$emit("refresh");
            this.projectRename.isShow = false;
            this.confirmTitle = "";
            this.hideSetting();
          } else {
            _this.$message.error(res.msg);
          }
        });
      }
    },
    //复制项目
    copyProject() {
      this.hideSetting();
      var _this = this;
      this.$confirm({
        title: "复制项目",
        content: "您确定要复制项目及项目内的所有内容么？",
        centered: true,
        cancelText: "取消",
        okText: "确认复制",
        onOk() {
          let parms = { id: _this.item.id };
          _this.$axios.post("/project/copy", parms).then((res) => {
            console.log(res.success);
            if (res.success) {
              _this.$message.success("项目复制成功");
              _this.$emit("refresh");
              _this.hideSetting();
            } else {
              _this.$message.error(res.msg);
            }
          });
        },
        onCancel() {},
      });
    },
    beforeUpload(file, fileList) {
      return new Promise((resolve, reject) => {
        getQiniuTokens(this.$axios).then((res) => {
          if (res) {
            this.tokens["token"] = res;
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    //上传封面:project/update
    uploadCover(info) {
      var _this = this;
      console.log(info);
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        // this.$message.success(`${info.file.name} 上传成功`);
        const parms = {
          id: _this.item.id,
          title: _this.item.title,
          cover: info.file.response.hash,
        };
        this.$axios.post("/project/update", parms).then((res) => {
          console.log(res.success);
          if (res.success) {
            _this.$message.success("封面上传成功");
            _this.$emit("refresh");
          } else {
            _this.$message.error(res.msg);
          }
        });
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} 上传成功失败`);
      }
    },
  },
};
</script>

<style scoped type="text/css" lang="scss">
.ant-col-8 > .i-card:nth-child(n + 1) {
  margin-top: 30px;
}
.i-card-paper {
  cursor: pointer;
  transition: box-shadow 0.1s;
  box-shadow: none;
  border-radius: 8px;
  height: 240px;
  width: 240px;
  margin: 0 auto;

  &:hover {
    box-shadow: 5px 8px 10px 3px rgba(14, 23, 38, 0.1);
  }
}
.i-card {
  &:hover {
    .text_controller {
      .text_btn {
        > i {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 1;
        }
      }
    }
  }
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: block;
  border-radius: 8px;
  /*overflow: hidden;*/
  position: relative;
  box-shadow: none;
  .imgbox {
    width: 240px;
    height: 184px;
    position: relative;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    img {
      width: 100%;
      height: 240px;
    }
    .ic_controller {
      transition: opacity 0.2s;
      opacity: 0;
      background: rgba(1, 1, 1, 0.6);
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      display: block;
      .ic_changeimg {
        z-index: 2;
        position: absolute;
        font-size: 30px;
        top: 10px;
        right: 10px;
        color: #fff;
      }
    }
    &:hover .ic_controller {
      opacity: 1;
    }
  }
  .text_controller {
    position: relative;
    color: #000;
    .text_title {
      height: 56px;
      line-height: 56px;
      padding: 0px 35px;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }
    .text_btn {
      > i {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        transition: all 0.2s linear;
      }
      line-height: 56px;
      font-size: 17px;
      padding: 0 5px;
      color: #000;
    }
  }
  // &:hover {
  //   box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.2);
  // }
  .card_setting {
    position: absolute;
    display: none;
    z-index: 90;
    width: 190px;
    background-color: #fff;
    right: 40px;
    bottom: 30px;
    box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
    .ic_group_menu {
      position: absolute;
      right: -190px;
      width: 190px;
      top: 100px;
      display: none;
    }
  }
}

.setting-menu-list {
  line-height: 1;
  color: #4a4a4a;
  .item-text {
    margin-left: 5px;
    margin-right: 5px;
  }
  .item-img {
    width: 15px;
    margin-right: 7px;
  }
}
.event_mask {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 89;
}
.card_name_header {
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  padding: 0px 30px;
}
.inputBox {
  padding: 30px;
  line-height: 20px;
  input[type="text"] {
    font-size: 18px;
    border: none;
    outline: none;
    border-bottom: 1px solid #3366ff;
    width: 100%;
    margin-bottom: 20px;
  }
  .classType {
    label {
      margin-right: 30px;
    }
  }
}
.car_name_footer {
  clear: both;
  overflow: hidden;
  text-align: right;
  button {
    margin-left: 30px;
  }
}
</style>
